<template>
	<view class="p-l-20 p-r-20 p-t-24 center-con">
		<view class="bg-white" style="border-radius: 12upx;overflow: hidden">
			<view class="p-l-20 white bold" style="background-color: #FB8967;height: 88upx;line-height: 88upx;">
				最近订单
			</view>
			<block v-if="orderList!=null">
				<transport-item :item="orderList"></transport-item>
			</block>
			
			<view class="" style="height:303upx;" v-else>
				<u-empty mode="list" text="暂无可咨询的订单" ></u-empty>
			</view>
		</view>
		
		<view class="flex m-t-20">
			<view class="lg type-item" :class="typeActive==index?'active':''" v-for="(item,index) in typeList" @click="selectType(index)">
				{{item.name}}
			</view>
		</view>
		<view class="m-t-20">
			<view class="p-32 bg-white" style="border-radius: 12upx;padding-bottom: 0;">
				<view class="bold lg">
					常见问题
				</view>
				<block v-if="sonList.length>0">
					<view class="flex row-between  son-item" v-for="item in sonList" @click="questionDetail(item.id)" >
						<view class="" style="color: #646262;">
							{{item.question}}
						</view>
						<view class="">
							<u-icon name="arrow-right" color="#918A8A"></u-icon>
						</view>
					</view>
				</block>
				<view class="" v-else style="height: 420upx;" >
					<u-empty mode="list" text="暂无常见问题" ></u-empty>
				</view>
			</view>
		</view>
		<view class="flex footer-con">
			<view class="call-btn" @click="callPhone">呼叫客服</view>
			<view class="connect-btn" @click="connectServer">联系客服</view>
		</view>
	</view>
</template>

<script>
	import {transportList} from '@/api/user'
	import {questionType,questionList,getService} from '@/api/app';
	export default {
		data() {
			return {
				typeList:[],
				typeActive:0,
				sonList:[],
				orderList:null,
				phone:null
			}
		},
		watch:{
			
			typeActive(val){
				this.questionListFun(this.typeList[val].id)
			}
		},
		methods: {
			getServiceFun(){
				getService().then(res=>{
					console.log(res)
					this.phone = res.data.phone;
				})
			},
			connectServer(){
				uni.navigateTo({
					url:'/bundle/pages/contact_offical/contact_offical'
				})
			
			},
			transportListFun(){
				transportList({
					page_size:1,
					page_no:1
				}).then(res=>{
					if(res.code==1){
						if(res.data.lists.length>0){
							this.orderList = res.data.lists[0]
						}
					}
					console.log(res)
				})
			},
			selectType(index){
				this.typeActive = index;
			},
			questionTypeFun(){
				questionType().then(res=>{
					console.log(res)
					this.typeList = res.data.lists;
					
					this.questionListFun(this.typeList[0].id)
				})
			},
			questionListFun(category_id){
				questionList({category_id}).then(res=>{
					console.log(res)
					this.sonList = res.data.lists;
				})
			},
			questionDetail(id){
				uni.navigateTo({
					url:'/bundle/pages/question_info/question_info?id=' + id
				})
			},
			callPhone(){
				if(this.phone==''){
					this.$toast({
						title:"平台未添加客服"
					})
					return 
				}
				uni.makePhoneCall({
					phoneNumber:this.phone
				})
			}
		},
		onLoad() {
			this.transportListFun();
			this.questionTypeFun();
			this.getServiceFun();
		}
	}
</script>

<style lang="scss">
	.center-con{
		padding-bottom:calc(180rpx + env(safe-area-inset-bottom));
	}
	.type-item{
		margin-right: 48upx;
		border-bottom: 6upx solid #F6F6F6;
		&.active{
			color: #F04615 ;
			border-bottom: 6upx solid #F04615;
		}
	}
	.son-item{
		padding: 32upx 0;
		border-bottom: 2upx solid rgba(206, 204, 204, 100);
		&:last-child{
			border:none;
		}
	}
	.footer-con{
		position: fixed;
		bottom:0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 20upx;
		padding-bottom: 48upx;
		
		view{
			width: 320upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			font-weight: bold;
			border-radius: 8upx;
		}
		.call-btn{
			background-color: #fff;
			color: #6F6B6B;
		}
		.connect-btn{
			background-color: #EE6841;
			color: #fff;
		}
	}
</style>
